/* macOS 设计系统变量 */

:root {
  /* 颜色系统 */
  --color-primary: #007aff;
  --color-secondary: #5856d6;
  --color-success: #34c759;
  --color-warning: #ff9500;
  --color-danger: #ff3b30;
  
  /* 灰度色系 */
  --color-gray-50: #fafafa;
  --color-gray-100: #f5f5f7;
  --color-gray-200: #e5e5ea;
  --color-gray-300: #d1d1d6;
  --color-gray-400: #c7c7cc;
  --color-gray-500: #aeaeb2;
  --color-gray-600: #8e8e93;
  --color-gray-700: #636366;
  --color-gray-800: #48484a;
  --color-gray-900: #1c1c1e;
  
  /* 文字颜色 */
  --color-text-primary: #1d1d1f;
  --color-text-secondary: #86868b;
  --color-text-tertiary: #aeaeb2;
  --color-text-inverse: #ffffff;
  
  /* 背景颜色 */
  --color-bg-primary: #ffffff;
  --color-bg-secondary: #f5f5f7;
  --color-bg-tertiary: #e5e5ea;
  --color-bg-blur: rgba(240, 240, 245, 0.8);
  --color-bg-blur-dark: rgba(30, 30, 30, 0.8);
  
  /* 边框颜色 */
  --color-border-light: rgba(0, 0, 0, 0.05);
  --color-border-medium: rgba(0, 0, 0, 0.1);
  --color-border-strong: rgba(0, 0, 0, 0.2);
  
  /* 阴影 */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.15);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.2);
  --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.3);
  
  /* 圆角 */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 20px;
  --radius-full: 9999px;
  
  /* 间距 */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 12px;
  --spacing-lg: 16px;
  --spacing-xl: 20px;
  --spacing-2xl: 24px;
  --spacing-3xl: 32px;
  --spacing-4xl: 40px;
  
  /* 字体大小 */
  --font-size-xs: 11px;
  --font-size-sm: 12px;
  --font-size-base: 13px;
  --font-size-md: 14px;
  --font-size-lg: 16px;
  --font-size-xl: 20px;
  --font-size-2xl: 24px;
  --font-size-3xl: 32px;
  --font-size-4xl: 40px;
  
  /* 字体粗细 */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  
  /* 行高 */
  --line-height-tight: 1.2;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;
  
  /* Z-index 层级 */
  --z-index-dock: 9999;
  --z-index-menubar: 10000;
  --z-index-launchpad: 9998;
  --z-index-notification: 9997;
  --z-index-window: 100;
  --z-index-modal: 1000;
  --z-index-tooltip: 2000;
  
  /* 模糊效果 */
  --blur-sm: blur(10px);
  --blur-md: blur(20px);
  --blur-lg: blur(40px);
  --blur-xl: blur(60px);
  
  /* 过渡时间 */
  --duration-fast: 150ms;
  --duration-normal: 300ms;
  --duration-slow: 500ms;
  
  /* 缓动函数 */
  --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.6, 1);
  
  /* macOS 特定尺寸 */
  --menubar-height: 32px;
  --dock-height: 76px;
  --window-titlebar-height: 40px;
  --sidebar-width: 220px;
  
  /* 背景模糊饱和度 */
  --backdrop-blur: blur(40px) saturate(180%);
  --backdrop-blur-light: blur(20px) saturate(180%);
}

/* 深色模式变量 */
@media (prefers-color-scheme: dark) {
  :root {
    --color-text-primary: #f5f5f7;
    --color-text-secondary: #aeaeb2;
    --color-text-tertiary: #86868b;
    --color-text-inverse: #1d1d1f;
    
    --color-bg-primary: #1c1c1e;
    --color-bg-secondary: #2c2c2e;
    --color-bg-tertiary: #3a3a3c;
    --color-bg-blur: rgba(30, 30, 30, 0.8);
    
    --color-border-light: rgba(255, 255, 255, 0.05);
    --color-border-medium: rgba(255, 255, 255, 0.1);
    --color-border-strong: rgba(255, 255, 255, 0.2);
  }
}

/* 工具类 */
.glass-effect {
  background: var(--color-bg-blur);
  backdrop-filter: var(--backdrop-blur);
  -webkit-backdrop-filter: var(--backdrop-blur);
}

.glass-effect-light {
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: var(--backdrop-blur-light);
  -webkit-backdrop-filter: var(--backdrop-blur-light);
}

.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.shadow-xl { box-shadow: var(--shadow-xl); }

.rounded-sm { border-radius: var(--radius-sm); }
.rounded-md { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-xl { border-radius: var(--radius-xl); }
.rounded-2xl { border-radius: var(--radius-2xl); }
.rounded-full { border-radius: var(--radius-full); }

